<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>
        工作表管理
    </title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/css/main.css" media="all">
    <link rel="stylesheet" href="/css/bootstrap.css">
</head>
<style>
    #top_tr>th{
        text-align: center;
        width: 237px;
    }
    .session_tr>td:not(:first-child){
        position: relative;
    }
    .modifyBtn{
        display: none;
        position: absolute;
        top:3px;
        right: 5px;
    }
</style>
<script src="/js/jquery.min.js"></script>
<body>
<div class="x-nav">
            <span class="layui-breadcrumb">
              <a><cite>首页</cite></a>
              <a><cite>工作表管理</cite></a>
              <a><cite>工作表概览</cite></a>
            </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"  href="javascript:location.replace(location.href);" title="刷新"><i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>
<div class="x-body">
    <form class="layui-form layui-form-pane" action="/scheduling/searchScheduling.html" id="searchForm" method="get">
        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
            <div class="layui-tab-content" >
                <div class="layui-tab-item layui-show">
                    <div class="layui-form-item" style="position: absolute;left: 20px;top: 50px;">
                        <label class="layui-form-label">岗位</label>
                        <div class="layui-input-inline">
                            <select name="role" id="role" style="display:none;">
                                <c:if test="${not empty roles}">
                                    <c:forEach items="${roles}" var="role">
                                        <option value="${role.id}" <c:if test="${role.id == roleId}">selected</c:if>>${role.name}</option>
                                    </c:forEach>
                                </c:if>
                                <c:if test="${empty roles}">
                                    <option value="-1">暂无记录~</option>
                                </c:if>
                            </select>
                            <button class="layui-btn" type="button" id="searchBtn" style="position: absolute;top: 0px;left: 200px">
                                查询
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
    <xblock>
        <p style="margin: 10px 0;font-weight: 600;padding-left: 10px;margin: 5px 0px">
            <span>工作时间表</span>
            <button class="layui-btn layui-btn-warm" type="button" id="downLoadFileBtn" style="margin-left: 90%" onclick="downLoadFile()">
                <i class="layui-icon">&#xe61e;</i>导出
            </button>
        </p>
    </xblock>
    <table class="layui-table table-bordered" style="width: 80%;margin: 0 auto" id="scheduling">
        <thead>
            <tr id="top_tr">
                <th>
                    时段
                </th>
                <th>
                    星期一
                </th>
                <th>
                    星期二
                </th>
                <th>
                    星期三
                </th>
                <th>
                    星期四
                </th>
                <th>
                    星期五
                </th>
                <th>
                    星期六
                </th>
                <th>
                    星期日
                </th>
            </tr>
        </thead>
        <tbody>
            <c:forEach items="${schedulingMap}" var="schedulingList">
                <tr style="text-align: center;height: 75px" class="session_tr" typeID="${schedulingList.key}">
                    <td>
                        <c:choose>
                            <c:when test="${schedulingList.key == 1}"><span>上午A班</span></c:when>
                            <c:when test="${schedulingList.key == 2}"><span>上午B班</span></c:when>
                            <c:when test="${schedulingList.key == 3}"><span>下午A班</span></c:when>
                            <c:when test="${schedulingList.key == 4}"><span>下午B班</span></c:when>
                            <c:when test="${schedulingList.key == 5}"><span>晚上A班</span></c:when>
                            <c:when test="${schedulingList.key == 6}"><span>晚上B班</span></c:when>
                        </c:choose>
                    </td>
                    <td class="session_td" week="1">
                        <c:forEach items="${schedulingList.value}" var="scheduling">
                            <c:if test="${scheduling.week==1}">
                                <span class="modifyBtn">
                                    <a title="编辑" href="javascript:;" onclick="scheduling_edit(this,'编辑','showModifyPage.html','${scheduling.id}','1000','600','${scheduling.week}')" class="ml-5" style="text-decoration:none">
                                        <i class="layui-icon">&#xe642;</i>
                                    </a>
                                    <a title="删除" href="javascript:;" onclick="scheduling_del(this,${scheduling.id})" style="text-decoration:none">
                                        <i class="layui-icon">&#xe640;</i>
                                    </a>
                                </span>
                                <span>${scheduling.user.name}</span><br>
                                <span>${scheduling.user.tel}</span><br>
                                <span>${scheduling.startTime}</span>
                                <span> — </span>
                                <span class="endTime">${scheduling.endTime}</span>
                            </c:if>
                        </c:forEach>
                    </td>
                    <td class="session_td" week="2">
                        <c:forEach items="${schedulingList.value}" var="scheduling">
                            <c:if test="${scheduling.week == 2}">
                                <span class="modifyBtn">
                                    <a title="编辑" href="javascript:;" onclick="scheduling_edit(this,'编辑','showModifyPage.html','${scheduling.id}','1000','600','${scheduling.week}')" class="ml-5" style="text-decoration:none">
                                        <i class="layui-icon">&#xe642;</i>
                                    </a>
                                    <a title="删除" href="javascript:;" onclick="scheduling_del(this,${scheduling.id})" style="text-decoration:none">
                                        <i class="layui-icon">&#xe640;</i>
                                    </a>
                                </span>
                                <span>${scheduling.user.name}</span><br>
                                <span>${scheduling.user.tel}</span><br>
                                <span>${scheduling.startTime}</span>
                                <span> — </span>
                                <span class="endTime">${scheduling.endTime}</span>
                            </c:if>
                        </c:forEach>
                    </td>
                    <td class="session_td" week="3">
                        <c:forEach items="${schedulingList.value}" var="scheduling">
                            <c:if test="${scheduling.week == 3}">
                                <span class="modifyBtn">
                                    <a title="编辑" href="javascript:;" onclick="scheduling_edit(this,'编辑','showModifyPage.html','${scheduling.id}','1000','600','${scheduling.week}')" class="ml-5" style="text-decoration:none">
                                        <i class="layui-icon">&#xe642;</i>
                                    </a>
                                    <a title="删除" href="javascript:;" onclick="scheduling_del(this,${scheduling.id})" style="text-decoration:none">
                                        <i class="layui-icon">&#xe640;</i>
                                    </a>
                                </span>
                                <span>${scheduling.user.name}</span><br>
                                <span>${scheduling.user.tel}</span><br>
                                <span>${scheduling.startTime}</span>
                                <span> — </span>
                                <span class="endTime">${scheduling.endTime}</span>
                            </c:if>
                        </c:forEach>
                    </td>
                    <td class="session_td" week="4">
                        <c:forEach items="${schedulingList.value}" var="scheduling">
                            <c:if test="${scheduling.week == 4}">
                                <span class="modifyBtn">
                                    <a title="编辑" href="javascript:;" onclick="scheduling_edit(this,'编辑','showModifyPage.html','${scheduling.id}','1000','600','${scheduling.week}')" class="ml-5" style="text-decoration:none">
                                        <i class="layui-icon">&#xe642;</i>
                                    </a>
                                    <a title="删除" href="javascript:;" onclick="scheduling_del(this,${scheduling.id})" style="text-decoration:none">
                                        <i class="layui-icon">&#xe640;</i>
                                    </a>
                                </span>
                                <span>${scheduling.user.name}</span><br>
                                <span>${scheduling.user.tel}</span><br>
                                <span>${scheduling.startTime}</span>
                                <span> — </span>
                                <span class="endTime">${scheduling.endTime}</span>
                            </c:if>
                        </c:forEach>
                    </td>
                    <td class="session_td" week="5">
                        <c:forEach items="${schedulingList.value}" var="scheduling">
                            <c:if test="${scheduling.week == 5}">
                                <span class="modifyBtn">
                                    <a title="编辑" href="javascript:;" onclick="scheduling_edit(this,'编辑','showModifyPage.html','${scheduling.id}','1000','600','${scheduling.week}')" class="ml-5" style="text-decoration:none">
                                        <i class="layui-icon">&#xe642;</i>
                                    </a>
                                    <a title="删除" href="javascript:;" onclick="scheduling_del(this,${scheduling.id})" style="text-decoration:none">
                                        <i class="layui-icon">&#xe640;</i>
                                    </a>
                                </span>
                                <span>${scheduling.user.name}</span><br>
                                <span>${scheduling.user.tel}</span><br>
                                <span>${scheduling.startTime}</span>
                                <span> — </span>
                                <span class="endTime">${scheduling.endTime}</span>
                            </c:if>
                        </c:forEach>
                    </td>
                    <td class="session_td" week="6">
                        <c:forEach items="${schedulingList.value}" var="scheduling">
                            <c:if test="${scheduling.week == 6}">
                                <span class="modifyBtn">
                                    <a title="编辑" href="javascript:;" onclick="scheduling_edit(this,'编辑','showModifyPage.html','${scheduling.id}','1000','600','${scheduling.week}')" class="ml-5" style="text-decoration:none">
                                        <i class="layui-icon">&#xe642;</i>
                                    </a>
                                    <a title="删除" href="javascript:;" onclick="scheduling_del(this,${scheduling.id})" style="text-decoration:none">
                                        <i class="layui-icon">&#xe640;</i>
                                    </a>
                                </span>
                                <span>${scheduling.user.name}</span><br>
                                <span>${scheduling.user.tel}</span><br>
                                <span>${scheduling.startTime}</span>
                                <span> — </span>
                                <span class="endTime">${scheduling.endTime}</span>
                            </c:if>
                        </c:forEach>
                    </td>
                    <td class="session_td" week="7">
                        <c:forEach items="${schedulingList.value}" var="scheduling">
                            <c:if test="${scheduling.week == 7}">
                                <span class="modifyBtn">
                                    <a title="编辑" href="javascript:;" onclick="scheduling_edit(this,'编辑','showModifyPage.html','${scheduling.id}','1000','600','${scheduling.week}')" class="ml-5" style="text-decoration:none">
                                        <i class="layui-icon">&#xe642;</i>
                                    </a>
                                    <a title="删除" href="javascript:;" onclick="scheduling_del(this,${scheduling.id})" style="text-decoration:none">
                                        <i class="layui-icon">&#xe640;</i>
                                    </a>
                                </span>
                                <span>${scheduling.user.name}</span><br>
                                <span>${scheduling.user.tel}</span><br>
                                <span>${scheduling.startTime}</span>
                                <span> — </span>
                                <span class="endTime">${scheduling.endTime}</span>
                            </c:if>
                        </c:forEach>
                    </td>
                </tr>
            </c:forEach>
        </tbody>
    </table>
    <div id="page"></div>
</div>
<script src="/lib/layui/layui.js" charset="utf-8"></script>
<script src="/js/x-layui.js" charset="utf-8"></script>
<script src="/js/jquery.table2excel.min.js"></script>
<script>
    layui.use(['laydate','element','laypage','layer','form'], function(){
        $ = layui.jquery;//jquery
        laydate = layui.laydate;//日期插件
        lement = layui.element();//面包导航
        laypage = layui.laypage;//分页
        layer = layui.layer;//弹出层
    });

    function question_show (argument) {
        layer.msg('可以跳到前台具体问题页面',{icon:1,time:1000});
    }
    /*添加*/
    function scheduling_add(title,url,w,h,type,week,preEndTime){
        if (preEndTime){
            url = url+"?roleId=${roleId}&week="+week+"&type="+type+"&preEndTime="+preEndTime;
        }else{
            url = url+"?roleId=${roleId}&week="+week+"&type="+type;
        }
        x_admin_show(title,url,w,h);
    }
    //编辑
    function scheduling_edit(obj,title,url,id,w,h,week) {
        if ($(obj).parent().parent("td").parent("tr").prev().length>0){
            var preTr = $(obj).parent().parent("td").parent("tr").prev();
            var endTimeSpan = preTr.children("td[week = '"+week+"']").children("span[class = 'endTime']");
            if (endTimeSpan.length>0){
                var preEndTime = endTimeSpan.text();
                url = url+"?id="+id+"&roleId=${roleId}&week="+week+"&preEndTime="+preEndTime;
            }else{
                url = url+"?id="+id+"&roleId=${roleId}&week="+week;
            }
        }
        x_admin_show(title,url,w,h);
    }

    /*删除*/
    function scheduling_del(obj,id){
        layer.confirm('确认要删除吗？',{icon:3,title:'提示信息'},function(index){
            $.ajax({
                type:"post",
                url:"deleteSelective.action",
                data:{schedulingId:id},
                dataType:"json",
                success:function(data){
                    if(data.status==1){
                        //发异步删除数据
                        layer.msg(data.info,{icon:6,time:1000});
                        setTimeout(function(){
                            window.location.reload();
                        },1000);return false;
                    } else{
                        layer.msg(data.info,{icon:5,time:1000});return false;
                    }
                }
            });
        });
    }

    /*导表*/
    function downLoadFile(){
        layer.confirm('确认要导出当前数据？',{icon:3,title:'提示信息'},function(index){
            $("#scheduling").table2excel({
                exclude: ".noExl",
                name: "Excel Document Name",
                filename: "工作表",
                exclude_img: true,
                exclude_links: true,
                exclude_inputs: true
            });
            layer.close(index);
        });
    }
</script>
<script>
    $(".session_td").hover(function(){
        $(this).children(":first").css("display","block");
    },function(){
        $(this).children(":first").css("display","none");
    });
    $('#searchBtn').click(function () {
        $('#searchForm').submit();
    })
    $(function () {
        $(".session_td:not(:has('span'))").html("<span></span><span style='color: #3333336e;font-size: 12px;display: inline-block;margin-bottom: 10px;cursor: pointer;'>待分配</span></br><i style='font-size: 45px;color: #3333336e;cursor: pointer;' class=\"layui-icon insertIcon\">&#xe654;</i>");
        $(".insertIcon").on("mouseover", function() {
            $(this).parent().children().css('color','#333');
        });
        $(".insertIcon").on("mouseout", function() {
            $(this).parent().children().css('color','#3333336e');
        });
        $(".insertIcon").on("click",function () {
            var week = $(this).parent("td").attr('week');
            if ($(this).parent("td").parent("tr").prev().length>0){
                var preTr = $(this).parent("td").parent("tr").prev();
                var endTimeSpan = preTr.children("td[week = '"+week+"']").children("span[class = 'endTime']");
                if (endTimeSpan.length>0){
                    var preEndTime = endTimeSpan.text();
                }
            }
            var typeID =  $(this).parent("td").parent("tr").attr("typeID");
            scheduling_add('添加','showModifyPage.html','1000','600',typeID,week,preEndTime);
        })
    })
</script>
</body>
</html>